<script setup lang="ts">
import {computed} from "vue";
import {formatMoney} from "@/utils/tools.ts";

const props = defineProps({
  rank: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: 'count'
  }
})

const ranking = computed(() => {
  const ranks: any[] = []
  if (props.rank.length < 5) {
    // 补充到五
    const length = 5 - props.rank.length
    Object.assign(ranks, props.rank)
    for (let i = 0; i < length; i++) {
      ranks.push({
        customerName: '--',
        invoiceCount: 0,
        invoiceAmount: 0
      })
    }

    return ranks
  }

  if (props.rank.length > 5) {
    // 截取前五
    Object.assign(ranks, props.rank.slice(0, 5))
    return ranks
  }
})

</script>

<template>
  <div class="ranking-wrapper">
    <div class="rank-item" v-for="(item, index) in ranking">
      <div class="rank-icon" v-if="index === 0"><img src="@/assets/statistic/first.svg" alt=""></div>
      <div class="rank-icon" v-else-if="index === 1"><img src="@/assets/statistic/second.svg" alt=""></div>
      <div class="rank-icon" v-else-if="index === 2"><img src="@/assets/statistic/third.svg" alt=""></div>
      <div class="rank-icon" v-else-if="index === 3"><img src="@/assets/statistic/fourth.svg" alt=""></div>
      <div class="rank-icon" v-else><img src="@/assets/statistic/fifth.svg" alt=""></div>
      <div class="rank-name" :title="item.customerName">{{ item.customerName }}</div>


      <div class="rank-count" v-if="props.type === 'count'">{{ item.invoiceCount }}张</div>
      <div class="rank-count" v-else>{{ formatMoney(item.invoiceAmount) }}元</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ranking-wrapper {
  margin-top: 10px;

  .rank-item {
    display: flex;
    line-height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;

    &:hover {
      background-color: #f5f5f5;
    }

    .rank-front {
      position: relative;
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
    }

    .rank-count {
      white-space: nowrap;
    }

    .rank-icon {
      display: flex;
      align-items: center;
      width: 30px;

      &.num {
        padding-left: 10px;
        margin-right: -10px;
      }

      img {
        width: 100%;
      }
    }

    .rank-name {
      max-width: calc(100% - 50px);
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>